import React, { Component } from 'react'
import styles from './SalaryPage.module.css'
import { Table } from 'antd'
import { connect } from 'react-redux'
import { getUserSalaryListAsync } from '../../../_redux/actions_async'

const columns = [
  {
    title: '总和',
    dataIndex: 'total',
  },
  {
    title: '岗位工资',
    className: 'column-money',
    dataIndex: 'postSalary',
  },
  {
    title: '绩效工资',
    dataIndex: 'performanceSalary',
  },
  {
    title: '工龄工资',
    dataIndex: 'workYearSalary'
  },
  {
    title: '津贴工资',
    dataIndex: 'allowanceSalary'
  },
  {
    title: '是否发放',
    dataIndex: 'flag',
    render: flag => <span>{['未发放', '已发放'][+flag]}</span>
  },
  {
    title: '发放时间',
    dataIndex: 'time'
  }
]

class SalaryPage extends Component {
  constructor (props) {
    super(props)
  }

  componentWillMount () {
    this.props.getUserSalaryListAsync()
  }

  render () {
    return (
      <div className={styles.container}>
        <Table
          columns={columns}
          dataSource={this.props.salaryList}
          bordered
          title={() => '薪资列表'}
        />
      </div>
    )
  }
}

SalaryPage.propTypes = {}

SalaryPage = connect(
  ({ $UserInfoState: { salaryList } }) => ({ salaryList }),
  { getUserSalaryListAsync}
)(SalaryPage)

export default SalaryPage
